<template>
	<n-popover
		trigger="hover"
		:show-arrow="true"
		:style="{
			'--n-color': 'var(--color-bg-5)'
		}">
		<template #trigger>
			<span class="relative inline-flex items-center max-w-full overflow-hidden" :class="class1">
				<base-amount :value="value" :currency="currency as any" hide-currency />
				<base-currency
					class="ml-1 flex-shrink-0 w-[14px] h-[14px]"
					:currency="currency || appStore.currency"
					:class="currencyClass" />
			</span>
		</template>
		<span
			class="relative w-full inline-flex items-center justify-between overflow-hidden bg-bg-5 rounded-lg px-3 py-1">
			<span class="flex-grow overflow-hidden">
				<base-amount :value="hoverValue" :currency="currency as any" hide-currency />
			</span>
			<base-currency
				class="ml-1 flex-shrink-0 w-[14px] h-[14px]"
				:currency="currency || appStore.currency"
				:class="currencyClass" />
		</span>
	</n-popover>
</template>

<script lang="ts" setup>
import { NPopover } from 'naive-ui'
import { BaseCurrency, BaseAmount } from '@/components/base'
import { useAppStore } from '@/store'
defineProps({
	value: {
		type: [Number, String],
		default: ''
	},
	hoverValue: {
		type: [Number, String],
		default: ''
	},
	src: {
		type: String,
		default: ''
	},
	currency: {
		type: String,
		default: 'USDT'
	},
	currencyClass: {
		type: String
	},
	class1: {
		type: String
	},
	currencySymbol: {
		type: String,
		default: undefined
	},
	hideCurrency: {
		type: Boolean,
		default: false
	},
	precision: {
		type: [Number, String]
	}
})

const appStore = useAppStore()
</script>
